<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>财务列表</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="node_modules/select2/dist/css/select2.min.css">
    <link rel="stylesheet" href="node_modules/datatables.net-bs/css/dataTables.bootstrap.css">
    <link rel="stylesheet" href="css/zfz-switch.css">
    <link rel="stylesheet" href="css/custom.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="node_modules/html5shiv/dist/html5shiv.min.js"></script>
      <script src="node_modules/respond.js/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <!-- 左菜单 -->
      <div class="col-md-2 left-menu">
        <div class="row">
          <div class="menu-main-title">
            <h4>餐饮设置</h4>
          </div>
          <div class="list-group">
            <a href="#menu01" class="list-group-item menu-title" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseMenu01">
              <i class="fa fa-chevron-right"></i>基础资料
            </a>
            <ul class="list-group collapse.in indent-10" id="menu01">
              <a href="#" class="list-group-item">餐厅资料</a>
              <a href="#" class="list-group-item">餐位资料</a>
              <a href="#" class="list-group-item">品类管理</a>
            </ul>
            <a href="#menu02" class="list-group-item menu-title" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMenu02">
              <i class="fa fa-chevron-right"></i>售卖设置
            </a>
            <ul class="list-group collapse.in indent-10" id="menu02">
              <a href="#" class="list-group-item">酒菜设置</a>
              <a href="#" class="list-group-item">折扣设置</a>
              <a href="#" class="list-group-item">套餐设置</a>
            </ul>
            <a href="#menu03" class="list-group-item menu-title" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMenu03">
              <i class="fa fa-chevron-right"></i>结算管理
            </a>
            <ul class="list-group collapse.in indent-10" id="menu03">
              <a href="#" class="list-group-item menu-active">财务列表</a>
              <a href="#" class="list-group-item">签单欠离账务</a>
            </ul>
            <a href="#menu04" class="list-group-item menu-title" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMenu04">
              <i class="fa fa-chevron-right"></i>餐饮报表
            </a>
            <ul class="list-group collapse.in indent-10" id="menu04">
              <a href="#" class="list-group-item">营收流水</a>
              <a href="#" class="list-group-item">经营报表（日、月）</a>
            </ul>
            <a href="#" class="list-group-item menu-title indent-10" role="button">
              系统日志
            </a>
          </div>
        </div>
      </div>
      <!-- 右主体 -->
      <div class="col-md-10">
        <div class="menu-main-title">
          <h4><i class="fa fa-shopping-cart"></i> 财务列表</h4>
        </div>
        <!-- 查询栏开始 -->
        <div class="col-md-12">
          <div class="row">
            <form class="form-inline pull-left search" action="index.html" method="post" style="margin-bottom:0;">
              <div class="form-group">
                <label for="01">餐厅简称：</label>
                <select class="form-control" name="01" id="01" style="width:120px">
                  <option value="all">全部</option>
                  <option value="fengshouri">丰收日</option>
                  <option value="xuanyi">轩逸茶餐厅</option>
                </select>
              </div>
              <div class="form-group">
                <label for="query"></label>
                <button type="button" class="btn btn-query" name="button">
                  <i class="fa fa-search"></i> 查询
                </button>
              </div>
            </form>
          </div>
          <div class="row">
            <ul class="list-inline query">
              <li>查询结果：</li>
              <li>丰收日 ></li>
              <li class="query-tags">当日 ×</li>
              <li class="query-tags">已结 ×</li>
              <li><u>清除</u></li>
              <li class="query-tags va-mid pull-right">
                <a href="#collapseQuery" data-toggle="collapse" aria-expanded="false" aria-controls="collapseQuery">
                  <span class="querySwitch">展开筛选</span> <i class="fa fa-arrow-down queryArrow"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="row collapse" id="collapseQuery">
            <ul class="list-inline query">
              <li>账单时间</li>
              <li>不限</li>
              <li>
                <span class="query-active">当日</span>
              </li>
              <li>一周内</li>
              <li>一个月内</li>
            </ul>
            <ul class="list-inline query">
              <li>财务状态</li>
              <li>不限</li>
              <li>
                <span class="query-active">已结</span>
              </li>
              <li>未结</li>
            </ul>
            <ul class="list-inline query">
              <li>状态</li>
              <li>
                <span class="query-active">不限</span>
              </li>
              <li>
                <label for="">
                  <input type="checkbox" name="" value="">
                  转房账
                </label>
              </li>
              <li>
                <label for="">
                  <input type="checkbox" name="" value="">
                  现付
                </label>
              </li>
              <li>
                <label for="">
                  <input type="checkbox" name="" value="">
                  支付宝
                </label>
              </li>
              <li>
                <label for="">
                  <input type="checkbox" name="" value="">
                  微信
                </label>
              </li>
              <li>
                <label for="">
                  <input type="checkbox" name="" value="">
                  银行卡
                </label>
              </li>
              <li>
                <label for="">
                  <input type="checkbox" name="" value="">
                  其它
                </label>
              </li>
            </ul>
          </div>
        </div>
        <!-- 查询栏结束 -->
        <div class="col-sm-12 blank-10"></div>
        <!-- 列表开始 -->
        <div class="col-md-12 table-list">
          <div class="row">
            <table class="table table-hover">
              <thead>
                <th>账单编号</th>
                <th>餐厅</th>
                <th>餐位桌号<i class="fa fa-caret-down"></i></th>
                <th>财务状态<i class="fa fa-caret-down"></i></th>
                <th>金额</th>
                <th>状态<i class="fa fa-caret-down"></i></th>
                <th>账单日期</th>
                <th>操作</th>
              </thead>
              <tbody>
                <tr class="text-center">
                  <td>19058343423342342</td>
                  <td>丰收日</td>
                  <td>T01</td>
                  <td>未结</td>
                  <td>199.00</td>
                  <td class="statu-enable">就餐中</td>
                  <td>2017/2/17 15:17</td>
                  <td>
                    <a href="#"
                    data-toggle="modal"
                    data-backdrop="static"
                    data-target="#editModal"
                    data-modal-id="88"
                    data-modal-title="财务信息"
                    data-tbl="zfz_tbl"
                    data-modal-form-action="edit">
                      结帐（转房账）
                    </a>
                   </td>
                </tr>
                <tr class="text-center">
                  <td>19058343423342342</td>
                  <td>丰收日</td>
                  <td>T01</td>
                  <td>未结</td>
                  <td>199.00</td>
                  <td class="statu-enable">
                    签单欠款
                    <i class="fa fa-caret-square-o-down price-tips"
                      data-container="body"
                      data-toggle="popover"
                      data-trigger="hover"
                      data-placement="bottom"
                      data-content="
                      <table>
                        <tr>
                          <td class='price-tips-left'>签单人：</td>
                          <td class='price-tips-right' style='text-align:left;'>杜海涛</td>
                        </tr>
                        <tr>
                          <td class='price-tips-left'>会员编号：</td>
                          <td class='price-tips-right'>888888888888888</td>
                        </tr>
                      </table>
                      "
                      data-html="true"
                      >
                    </i>
                  </td>
                  <td>2017/2/17 15:17</td>
                  <td>
                    <a href="#"
                    data-toggle="modal"
                    data-backdrop="static"
                    data-target="#editModal"
                    data-modal-id="88"
                    data-modal-title="财务信息"
                    data-tbl="qd_tbl"
                    data-modal-form-action="edit">
                      结帐（签单）
                    </a>
                   </td>
                </tr>
                <tr class="text-center">
                  <td>19058343423342342</td>
                  <td>丰收日</td>
                  <td>T01</td>
                  <td>未结</td>
                  <td>199.00</td>
                  <td class="statu-enable">
                    转房账
                    <i class="fa fa-caret-square-o-down price-tips"
                      data-container="body"
                      data-toggle="popover"
                      data-trigger="hover"
                      data-placement="bottom"
                      data-content="
                      <table>
                        <tr>
                          <td class='price-tips-left'>转入房间：</td>
                          <td class='price-tips-right' style='text-align:left;'>8302</td>
                        </tr>
                        <tr>
                          <td class='price-tips-left'>入住单号：</td>
                          <td class='price-tips-right'>88888888888888888</td>
                        </tr>
                      </table>
                      "
                      data-html="true"
                      >
                    </i>
                  </td>
                  <td>2017/2/17 15:17</td>
                  <td>
                    <a href="#"
                    data-toggle="modal"
                    data-backdrop="static"
                    data-target="#editModal"
                    data-modal-id="88"
                    data-modal-title="财务信息"
                    data-tbl="zk_tbl"
                    data-modal-form-action="edit">
                      结帐（折扣）
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- 列表结束 -->
            <span class="pull-left page-record">总共 130 条记录，每页：10 条</span>
            <nav aria-label="Page navigation" class="pull-right">
              <ul class="pagination">
                <li class="disabled">
                  <a href="#" aria-label="上一页">
                    <span aria-hidden="true"><</span>
                  </a>
                </li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                  <a href="#" aria-label="下一页">
                    <span aria-hidden="true">></span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
      <div class="modal-dialog modal-md">
        <form class="form-horizontal" action="#" method="post">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h5 class="modal-title" id=""></h5>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <table class="table no-border">
                    <tbody>
                      <tr>
                        <td class="text-right">餐位：</td>
                        <td>037</td>
                        <td class="text-right">就餐人数：</td>
                        <td>5人</td>
                      </tr>
                      <tr>
                        <td class="text-right">收银员：</td>
                        <td>杨亚林</td>
                        <td class="text-right">账单日期：</td>
                        <td>2017/2/17 15:17:00</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <table class="table no-border no-header nowrap" width="100%" cellspacing="0" id="scroll-table">
                    <thead width="100%" class="modal-small-title">
                      <tr>
                        <td>菜品</td>
                        <td class="text-center">数量/重量</td>
                        <td class="text-right">单价</td>
                        <td class="text-right">小计</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="">手撕鸡</td>
                        <td class="text-center">1</td>
                        <td class="text-right">88.00</td>
                        <td class="text-right sum-price">88.00</td>
                      </tr>
                      <tr>
                        <td class="">手撕鸡</td>
                        <td class="text-center">1</td>
                        <td class="text-right">88.00</td>
                        <td class="text-right sum-price">88.00</td>
                      </tr>
                      <tr>
                        <td class="">手撕鸡</td>
                        <td class="text-center">1</td>
                        <td class="text-right">88.00</td>
                        <td class="text-right sum-price">88.00</td>
                      </tr>
                      <tr>
                        <td class="">手撕鸡</td>
                        <td class="text-center">1</td>
                        <td class="text-right">88.00</td>
                        <td class="text-right sum-price">88.00</td>
                      </tr>
                      <tr>
                        <td class="">手撕鸡</td>
                        <td class="text-center">1</td>
                        <td class="text-right">88.00</td>
                        <td class="text-right sum-price">88.00</td>
                      </tr>
                      <tr>
                        <td class="">手撕鸡</td>
                        <td class="text-center">1</td>
                        <td class="text-right">88.00</td>
                        <td class="text-right sum-price">88.00</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <table class="table no-border table-condensed">
                    <tbody class="zk_tbl" style="display:none">
                      <tr class="modal-mid-line">
                        <td colspan="4">
                          <lable>
                            <input type="checkbox" name="" value="">
                            加收服务费2%
                          </label>
                          <label>
                            <input type="checkbox" name="" value="">
                            抹零
                          </label>
                        </td>
                      </tr>
                      <tr>
                        <td class="text-right va-mid">折扣使用：</td>
                        <td colspan="3">
                          <select class="form-control" style="width:100%" name="">
                            <option value="">会员折扣</option>
                            <option value="">入住折扣</option>
                          </select>
                        </td>
                      </tr>
                      <tr>
                        <td></td>
                        <td colspan="2">
                          <input type="text" class="form-control" name="" value="17017305052">
                        </td>
                        <td>
                          <button type="button" class="btn btn-query" style="width:100%" name="button">
                            <i class="fa fa-search"></i> 验证
                          </button>
                        </td>
                      </tr>
                      <tr>
                        <td class="text-right">折扣信息：</td>
                        <td colspan="3" class="modal-small-title">
                          姓名：杜海涛「金帐户 88折」 <span class="pull-right"><u>清除</u></span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody>
                      <tr class="modal-mid-line zfz_tbl qd_tbl" style="display:none;">
                        <td class="text-right">折扣信息：</td>
                        <td colspan="3" class="statu-enable">单品优惠88折</td>
                      </tr>
                      <tr>
                        <td class="text-right">菜品数量：</td>
                        <td class="text-right">22</td>
                        <td class="text-right">消费合计：</td>
                        <td class="text-right">1200.00</td>
                      </tr>
                      <tr>
                        <td class="text-right">折扣金额：</td>
                        <td class="text-right">78.50</td>
                        <td class="text-right">抹零金额：</td>
                        <td class="text-right">00.50</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td class="text-right"><b>应收金额：</b></td>
                        <td class="text-right">1080.00</td>
                      </tr>
                    </tbody>
                    <tbody class="zfz_tbl qd_tbl" style="display:none;">
                      <tr class="modal-mid-line zfz_tbl" style="display:none;">
                        <td class="text-right">实收金额：</td>
                        <td class="text-right">1080.00</td>
                        <td class="text-right">找零金额：</td>
                        <td class="text-right">0.00</td>
                      </tr>
                      <tr>
                        <td class="text-right">结帐方式：</td>
                        <td colspan="3">
                          <span class="zfz_tbl" style="display:none;">转房账</span>
                          <span class="qd_tbl" style="display:none;">签单</span>
                        </td>
                      </tr>
                      <tr>
                        <td class="text-right">房间号：</td>
                        <td colspan="3">8302</td>
                      </tr>
                      <tr>
                        <td class="text-right">签单姓名：</td>
                        <td colspan="3">王永华</td>
                      </tr>
                      <tr>
                        <td class="text-right">财务流水：</td>
                        <td colspan="3">227578320943058304583049</td>
                      </tr>
                      <tr>
                        <td class="text-right">付款日期：</td>
                        <td colspan="3">2017/2/17 15:17:00</td>
                      </tr>
                      <tr>
                        <td class="text-right">打印日期：</td>
                        <td colspan="3">2017/2/17 15:17:00</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <a href="#" class="btn btn-invoice pull-left">
                开具发票
              </a>
              <a href="#" class="btn btn-invoice pull-left zfz_tbl qd_tbl">
                打印票据
              </a>
              <a href="#" class="btn btn-warning pull-right qd_tbl zk_tbl btn-checkout"
              data-toggle="modal"
              data-target="#incomeModal"
              >
                <i class="fa fa-check"> 结帐</i>
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="modal fade" id="incomeModal" tabindex="-1" role="dialog" aria-labelledby="incomeModal" aria-hidden="true">
      <div class="modal-dialog modal-md">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="">财务信息</h4>
          </div>
          <div class="modal-body">
            <h2>应收金额：<span class="pull-right">1080.00</span></h2>
            <table class="table no-border">
              <tbody>
                <tr>
                  <td class="text-right">挂房账：</td>
                  <td colspan="3">
                    <div class="switch" tabindex="0">
                      <input type="checkbox" class="switch-checkbox" id="zfz-statu" placeholder="">
                    </div>
                  </td>
                </tr>
              </tbody>
              <tbody class="zfz-on">
                <tr>
                  <td class="text-right">房间查询：</td>
                  <td colspan="2">
                    <input type="text" class="form-control" name="" value="">
                  </td>
                  <td>
                    <a href="#" class="btn btn-query" style="width:100%;"
                    data-container="body"
                    data-toggle="popover"
                    data-trigger="focus"
                    data-placement="bottom"
                    data-content="
                    <table>
                      <tr>
                        <td class='price-tips-left'>
                          <span class='badge tags-badge-white'>8609</span>
                          杜海涛、欧阳娜娜
                        </td>
                        <td class='price-tips-right'>余额：￥129.00</td>
                      </tr>
                    </table>
                    "
                    data-html="true"
                    >
                      <i class="fa fa-check"></i> 验证
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">挂账房间：</td>
                  <td colspan="3">
                    <span class="badge tags-badge-white">8609 ×</span>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">挂账签单：</td>
                  <td colspan="3">
                    <select class="form-control" style="width:100%;" name="">
                      <option value="">欧阳娜娜</option>
                      <option value="">张三</option>
                    </select>
                  </td>
                </tr>
              </tbody>
              <tbody class="zfz-off" style="display:none;">
                <tr>
                  <td class="text-right">结帐金额：</td>
                  <td colspan="3">
                    <input type="text" class="form-control" name="" value="1080">
                  </td>
                </tr>
                <tr>
                  <td class="text-right">结帐方式：</td>
                  <td colspan="3">
                    <select class="form-control" name="">
                      <option value="">现金</option>
                      <option value="">支付宝</option>
                      <option value="">微信</option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-warning"><i class="fa fa-check"></i>结帐</button>
          </div>
        </div>
      </div>
    </div>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/select2/dist/js/select2.full.min.js"></script>
    <script src="node_modules/select2/dist/js/i18n/zh-CN.js"></script>
    <script src="node_modules/datatables.net/js/jquery.dataTables.js" charset="utf-8"></script>
    <script src="node_modules/datatables.net-bs/js/dataTables.bootstrap.js" charset="utf-8"></script>
    <script src="node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js" charset="utf-8"></script>
    <script src="js/custom.js" charset="utf-8"></script>
    <script type="text/javascript">
      $('#editModal').on('shown.bs.modal', function(e) {
        var button = $(e.relatedTarget);
        var modalTitle = button.data('modal-title');
        var modalFormAction = button.data('modal-form-action');
        var tbl = '.' + button.data('tbl');
        var modal = $(this);
        modal.find('.modal-title').text(modalTitle);
        modal.find('form').attr("action", modalFormAction);
        modal.find(tbl).show();
      });

      $(document).on('hidden.bs.modal', function(e) {
        $('.zfz_tbl').hide();
        $('.qd_tbl').hide();
        $('.zk_tbl').hide();
      });

      $('select').select2();

      $('#scroll-table').DataTable({
        scrollY: 200,
        paging: false,
        searching: false,
        ordering:  false,
        info: false
      });

      $('.switch-checkbox').bootstrapSwitch({
        'onText': '开',
        'offText': '关',
        'labelWidth': '0',
        'inverse': 'true',
      });

      $('#zfz-statu').on('switchChange.bootstrapSwitch', function(event, state) {
        if ( state == true) {
          $('.zfz-on').show();
          $('.zfz-off').hide();
        } else {
          $('.zfz-on').hide();
          $('.zfz-off').show();
        }
      });
    </script>
  </body>
</html>
